<template>
  <div class="bg-white">
    <div class="notify">
      <div class="w">
        <div class="row">
          <div class="col-4 left">
            <a href="#"
              ><img
                src="https://photo7n.gracg.com/062e1419cfcbfc2ef449ea118cbba24e.gif"
                alt=""
            /></a>
          </div>
          <div class="col-8 row right">
            <div class="col-4 right-item">
              <a href="#">
                <img
                  src="https://photo7n.gracg.com/admin_fe757e2a45fee92ff2f4c98554e44d4b.jpg!org"
                  alt=""
                />
              </a>
            </div>
            <div class="col-4 right-item">
              <a href="#">
                <img
                  src="https://photo7n.gracg.com/aa92fd271c1f2ab262ec9992033259fc.jpg!org"
                  alt=""
                />
              </a>
            </div>
            <div class="col-4 right-item">
              <a href="#">
                <img
                  src="https://photo7n.gracg.com/c047775ce3c2008b4a85ecb9b5ed76bb.jpg!org"
                  alt=""
                />
              </a>
            </div>
            <div class="d-flex notice">
              <i class="fa fa-volume-down"></i>
              <a href="#" class="bg-white"
                >没有灵感?是你没逼自己去做!来获得让人心动的魔法吧～
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w">
      <comp-to-login v-if="!token">
        <span>登录后关注更多插画师</span>
      </comp-to-login>
      <div class="artist-list">
        <div class="row">
          <div
            class="col-4 col-lg-2"
            v-for="item in userModule.artist"
            :key="item.aid"
          >
            <router-link
              :to="{ path: '/user', query: { id: item.aid } }"
              class="d-block"
              style="width: 90px; height: 90px"
            >
              <img :src="item.pic2" alt="" style="width: 90px; height: 90px" />
            </router-link>
            <router-link
              to="/user/100"
              class="font-weight-light font-16 d-block name"
              >{{ item.name }}</router-link
            >
            <p class="font-weight-light font-14 pt-2">人气:{{ item.pop }}万</p>
            <button class="btn btn-sm border">关注</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CompToLogin from "../components/comp-toLogin.vue";

import { mapState } from "vuex";
export default {
  components: {
    CompToLogin,
  },
  data() {
    return {
      token: null,
    };
  },
  computed: {
    ...mapState(["userModule"]),
  },
  created() {
    this.token = localStorage.getItem("userToken");
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";

.notify {
  padding: 30px 0;
  background-color: #f8f9fa;
  .row {
    width: 100%;
  }
  .left {
    width: 390px;
    margin-right: 10px;
    a {
      display: block;
      img {
        width: 100%;
        border-radius: 4px;
      }
    }
  }
  .right {
    // padding-right: 10px;
    box-sizing: border-box;
    width: 800px;
    padding-right: 10px;
    box-sizing: border-box;
    a {
      display: block;
      padding: 0;
      color: blue;
      img {
        width: 100%;
        border-radius: 4px;
      }
    }
    .right-item {
      padding-right: 0;
      &:first-child {
        padding-left: 0;
      }
    }

    .notice {
      padding-top: 16px;
      background-color: #fff;
      box-sizing: border-box;
      .fa {
        color: blue;
        padding-top: 4px;
        margin-right: 15px;
        font-size: 14px;
      }
      a {
        font-size: 14px;
        text-decoration: none;
      }
    }
  }
}

.artist-list {
  margin-top: 40px;
  .row {
    > div {
      margin-bottom: 50px;

      a {
        box-sizing: border-box;
        // text-align: center;
        img {
          margin-left: 50px;
          border-radius: 50%;
        }
      }
      a.name {
        text-align: center;
      }
      p {
        text-align: center;
      }
      .btn {
        margin-left: 70px;
        padding: 4px 10px;
        border-radius: 20px;
      }
    }
  }
}
</style>